<template>
  <!-- 首页共用头部 start -->
  <ALayoutHeader class="home_header">
    <!-- logo start -->
    <div class="m_logo">
      <div class="logo_img">
        <img src="../pages/index/img/logo.png" alt="" />
      </div>
      <div class="logo_text">学习王者</div>
    </div>
    <!-- logo end-->
    <!-- menu start -->
    <ul class="m_menu">
      <!-- <li class="m_menu_item m_active">学习项目</li> -->
      <!-- <li class="m_menu_item">资源库</li>
      <li class="m_menu_item">通讯录</li>
      <li class="m_menu_item">模板中心</li>
      <li class="m_menu_item">社区</li> -->
    </ul>
    <div class="m_right_tools">
      <!--头像 start-->
      <div class="m_user">
        <div class="m_user_photo">
          <mu-avatar :size="25" @click="redirectSettings">
            <img :src="baseImgUrl + userInfo.userAvatar" />
          </mu-avatar>
        </div>
        <mu-menu open-on-hover popover-class="user-menu" placement="bottom">
          <AIcon class="m_user_down" type="caret-down" />
          <mu-list class="setting-menu-main" slot="content">
            <mu-list>
              <mu-list-item
                class="info-menu"
                button
                key="1"
                @click="redirectSettings"
              >
                <div>
                  <div style="color:#4a4a4a;font-size:15px;margin-bottom:10px;">
                    {{ userInfo.userName }}
                  </div>
                  <div style="color:#9EA2A8;">基础版</div>
                </div>
              </mu-list-item>
            </mu-list>
            <mu-divider></mu-divider>
            <mu-list>
              <mu-list-item button key="2" @click="redirectSettings">
                <img
                  src="https://image.xuexiwangzhe.com/FqMGBL0-SlCuTS-qmckqnLwDXIq2"
                  style="margin-right:10px;width:20px;"
                />
                <span style="color:#4a4a4a;">账号设置</span>
              </mu-list-item>
            </mu-list>
            <mu-divider></mu-divider>
            <mu-list>
              <mu-list-item button key="3" @click="exitLogin">
                <img
                  src="https://image.xuexiwangzhe.com/Fkhryl5L2TPHvstrEmIbp1igz-wG"
                  style="margin-right:12px;width:15px;"
                />
                <span style="color:#4a4a4a;">退出登录</span>
              </mu-list-item>
            </mu-list>
          </mu-list>
        </mu-menu>
      </div>
      <!--头像 end-->
      <!-- message start -->
      <!-- <div :class="has_message == false ? 'm_email' : 'm_email_messgae'">
        <img src="../pages/index/img/youjian.png" alt="" />
      </div> -->
      <!-- message end -->
      <!-- help start-->
      <!-- <a href="#" class="m_help"><AIcon type="question-circle"/></a> -->
      <!-- help end-->
      <!--企业版升级 start-->
      <!-- <a href="#" class="m_level">
        升级为企业版
      </a> -->
      <!--企业版升级 start-->
    </div>
    <!-- menu end -->
  </ALayoutHeader>
  <!-- 首页共用头部 end -->
</template>

<script>
import ADropdown from "ant-design-vue";
import DropdownMenu from "ant-design-vue/es/vc-select/DropdownMenu";
import { exitLogin } from "../../util/user.js";
export default {
  name: "home-header",
  props: ["userInfo"],
  data() {
    return {
      visible: false,
      has_message: false,
      baseImgUrl: "https://image.xuexiwangzhe.com/",
    };
  },

  methods: {
    handleMenuClick(e) {
      if (e.key === "3") {
        this.visible = false;
      }
    },
    redirectSettings() {
      location.href = "user.html";
    },
    exitLogin() {
      exitLogin();
    },
  },

  components: { DropdownMenu },
};
</script>

<style scoped type="text/css" lang="scss">
.home_header {
  /*display:none;*/
  width: 100%;
  min-width: 1080px;
  height: 59px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 5px 0 rgba(100, 100, 100, 0.06);
  /*position: fixed;*/
  z-index: 9;
  clear: both;
  overflow: hidden;
  .m_logo {
    width: 250px;
    float: left;
    .logo_img {
      width: 39px;
      height: 39px;
      border-radius: 50%;
      overflow: hidden;
      display: block;
      margin-top: 10px;
      float: left;
      line-height: 1;
      img {
        width: 98%;
      }
    }
    .logo_text {      
      font-size: 20px;
      letter-spacing: 1px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      line-height: 59px;
      float: left;
      margin-left: 15px;
    }
  }
  .m_menu {
    float: left;
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: 59px;
    .m_menu_item {
      display: inline-block;
      cursor: pointer;
      height: 22px;
      font-size: 16px;
      letter-spacing: 1px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      width: 90px;
      height: 59px;
      text-align: center;
      &.m_active {
        font-weight: 500;
        color: #000;
        position: relative;
        &::after {
          content: "";
          display: block;
          position: absolute;
          height: 5px;
          width: 19px;
          background-color: #3366ff;
          bottom: 0px;
          // left: 135/2-2.5px;
          left: 35px;
        }
      }
    }
  }
  $mgr: 30px;
  .m_right_tools {
    height: 100%;
  }
  .m_user {
    height: 100%;
    float: right;
    display: flex;
    align-items: center;

    & .m_user_photo {
      display: inline-block;
      line-height: 1;
      font-size: 0;
      margin-right: 5px;

      .mu-avatar {
        cursor: pointer;
      }
    }
    .m_user_down {
      color: #666666;
      font-size: 14px;
      height: 63px;
      line-height: 68px;
      display: block;
      // margin-top: 50%;
      float: right;
    }
  }
  .m_email {
    float: right;
    line-height: 1;
    img {
      width: 23px;
      margin-top: 19px;
    }
    margin-right: $mgr;
  }
  .m_email_messgae {
    @extend .m_email;
    position: relative;
    &:after {
      display: block;
      content: "";
      width: 10px;
      height: 10px;
      background-color: #fe0000;
      position: absolute;
      top: 22px;
      right: -4px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .m_help {
    display: block;
    float: right;
    width: 20px;
    margin-right: $mgr;
    height: 20px;
    box-sizing: border-box;

    color: #666666;
    font-size: 22px;
    margin-top: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
  }
  .m_level {
    display: block;
    width: 125px;
    height: 33px;
    background: rgba(236, 104, 43, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    float: right;
    line-height: 33px;
    text-align: center;
    margin-right: $mgr;
    margin-top: 13px;
  }
}
</style>
